BUGFIX: Render table dropdowns with correct icons #3898
Conversation
The icons were broken and the fallback title was not aligned pretty well. So the SVG markup string will be transformed now to an data-uri and this can be used as image sorce.
|
I already fixed that in the CKEditor Upgrade PR. Did not know that it happened in 8.3. |
| return ( | ||
| <DropDown | ||
| padded={false} | ||
| > | ||
| <DropDown.Header title={this.props.i18nRegistry.translate(this.props.tooltip)}> | ||
| <img style={{verticalAlign: 'text-top'}} src={ckeIcons[this.props.icon]} alt={this.props.i18nRegistry.translate(this.props.tooltip)} /> | ||
| <img style={{verticalAlign: 'text-top'}} src={iconDataUri} alt={this.props.i18nRegistry.translate(this.props.tooltip)} /> |
There was a problem hiding this comment.
öhm do i get that right that we want to have the svgs as data-url and not as raw content string?
That can be done via the build setup. For the neos ui i introduced the convention that files ending with .dataurl.svg will get that treatment via the build setup already introduced via:
There was a problem hiding this comment.
The issue here was that the content of this.props.icon is just the SVG markup.
And that in a src tag is not working, and I bet that the build pipeline also doesn't handle it.
| @@ -0,0 +1,47 @@ | |||
| const REGEX = { | |||
There was a problem hiding this comment.
lol 😅 i hope you dindt had to write this yourself? :D I think more simple it would be to just use base64 decode and done :D
Edit: see comment above - i believe we dont need this at all hopefully
There was a problem hiding this comment.
Can discuss other solutions of course :)
There was a problem hiding this comment.
I simplified that and now use base64 for the inline dataUri SVG stuff.
What I did
The icons were broken, and the fallback title was not aligned pretty well. So the SVG markup string will be transformed now to a data-uri and this can be used as an image source.
How to verify it
Described in the linked issue.
Resolves: #3897